<template>
    <el-dialog
            :close-on-click-modal="false"
            :model-value="api.createState.visible"
            :title="api.createState.title"
            destroy-on-close
            width="600"
            @close="api.onCloseCreate()"
    >
        <el-form
                ref="formRef"
                :model="api.createState.form"
                :rules="rules"
                label-width="120px"
                status-icon
        >

            <el-form-item
                    label="组织机构名称"
                    prop="name"
            >
                <el-tree-select
                        v-model="api.createState.form.pid"
                        :data="api.treeState.data"
                        :props="{label:'name',value:'id'}"
                        :render-after-expand="false"
                        check-strictly
                        class="fill-width"
                        placeholder="请选择父级"
                />
            </el-form-item>

            <el-form-item
                    label="组织机构名称"
                    prop="name"
            >
                <el-input
                        v-model="api.createState.form.name"
                        clearable
                        placeholder="请输入组织机构名称"
                />
            </el-form-item>

            <el-form-item
                    label="顺序"
                    prop="sort"
            >
                <el-input-number
                        v-model="api.createState.form.sort"
                        class="fill-width"
                        clearable
                        placeholder="顺序"
                />
            </el-form-item>

            <el-form-item class="mb-0">
                <el-button type="primary" @click="onSubmit">创建</el-button>
                <el-button @click="api.onCloseCreate()">关闭</el-button>
            </el-form-item>

        </el-form>
    </el-dialog>
</template>

<script lang="ts" setup>
import {reactive, ref} from "vue";
import {FormRules} from "element-plus";
import {OrgApi} from "~/api/system/org/org.api";

interface Props {
    api: OrgApi;
}

const {api} = withDefaults(defineProps<Props>(), {});

const formRef = ref();
const rules = reactive<FormRules>({
    name: [{required: true, message: "请输入公司名称", trigger: "blur"}],
    pid: [{required: true, message: "请选择父级", trigger: "blur"}],
});

async function onSubmit() {
    const values = await formRef.value.validate();
    if (values) {
        api.submit(api.createState.form).then((res: any) => {
            if (res.ok) {
                api.onCloseCreate();
            }
        });
    }
}

</script>

<style lang="less" scoped>

</style>
